<template>
  <div>
          <!-- 面包屑区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>特征工程</el-breadcrumb-item>
        <el-breadcrumb-item>人工特征工程</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button class="queryBtn" @click="queryFeatureEng" type="primary">查看特征工程</el-button>
      <!-- 步骤条区域 -->
      <el-steps :active="activeIndex-0" align-center>
        <el-step title="特征工程名"></el-step>
        <el-step title="特征构建"></el-step>
        <el-step title="特征选择"></el-step>
        <el-step title="特征提取"></el-step>
      </el-steps>
           <!-- 表单区域 -->
      <el-form label-position="right" label-width="150px" :model="addFeatureForm" :rules="addFeatureFormRules" ref="addFeatureFormRef" class="demo-ruleForm">
              <!-- 左边的tab标签,，这里的v-model绑定的是name的值，因此是字符串 -->
        <el-tabs tab-position="left" v-model="activeIndex">
          <el-tab-pane label="特征工程名" name="0">
            <el-form-item label="特征工程名" prop="featureEng_name">
              <el-input clearable style="width:350px" v-model="addFeatureForm.featureEng_name" placeholder="请填写特征工程名"></el-input>
            </el-form-item>
            <el-form-item label="特征工程类型" prop="featureEng_type">
              <el-input disabled="" style="width:350px" v-model="addFeatureForm.featureEng_type"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="特征构建" name="1">
            <el-form-item label="选择算法" prop="featureEng_processes">
              <el-select style="width:350px" v-model="operate_nameValue1" placeholder="请选择方法">
                <el-option
                  v-for="item in options1" :key="item.value"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择保留列" prop="featureEng_processes">
              <el-select style="width:350px" multiple  v-model="operate_columnsValue1" placeholder="请选择保留列">
                <el-option
                  v-for="(item,index) in columnsList" :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="特征选择" name="2">
          </el-tab-pane>
          <el-tab-pane label="特征提取" name="3">
            <el-form-item label="提取方法" prop="featureEng_processes">
              <el-select style="width:350px" v-model="operate_nameValue2" placeholder="请选择特征">
                <el-option
                  v-for="item in options2" :key="item.value"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择保留列" prop="featureEng_processes">
              <el-select style="width:350px" multiple  v-model="operate_columnsValue2" placeholder="请选择保留列">
                <el-option
                  v-for="(item,index) in columnsList" :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="n_components" prop="featureEng_processes">
              <el-select style="width:350px" v-model="n_componentsValue" placeholder="请选择n_components">
                <el-option
                  v-for="item in options3" :key="item.value"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="新数据集名称" prop="new_dataset_name" >
              <el-input style="width:350px" clearable  v-model="addFeatureForm.new_dataset_name" placeholder="请填写新数据集名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitHumanForm">立即创建</el-button>
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <!--      选择数据集，弹出的窗口-->
  </div>
</template>
<script>
import featureApi from './../../api/feature'
// import learnApi from './../../api/learn'
import humanApi from './../../api/humanFeature'
// import db from './../../api/db'
// import qs from 'qs'
export default {
  name: 'HumanFea',

  data () {
    return {
      activeIndex: '0',
      // 表单
      addFeatureForm: {
        // 特征工程名
        featureEng_name: '',
        // 特征工程类型
        featureEng_type: 'Manual',
        featureEng_processes: [
        ],
        original_dataset_id: '',
        new_dataset_name: ''
      },
      operate_nameValue1: '',
      operate_columnsValue1: [],
      operate_columnsValue2: [],
      operate_nameValue2: '',
      n_componentsValue: 1,
      options1: [
        { value: '1', name: 'OneHot' }
      ],
      options2: [
        { value: '1', name: 'PCA' }
      ],
      options3: [
        { value: '1', name: 1 },
        { value: '2', name: 2 },
        { value: '3', name: 5 },
        { value: '4', name: 6 }
      ],
      addFeatureFormRules: {
        feature_name: [
          { required: true, message: '请选择特征', trigger: 'blur' }
        ]
      },
      // 在特征首页选择的数据集及其列名
      OriginDatasetId: '',
      columnsList: [],
      algorithm_category: 'FeatureEng_construct'

    }
  },
  created () {
    this.getOriginDatasetId()
  },
  methods: {
    // 点击确定按钮，提交上传数据表单
    submitHumanForm () {
      const suanfa1 = { operate_name: this.operate_nameValue1, col_retain: this.operate_columnsValue1 }
      const suanfa2 = { operate_name: this.operate_nameValue2, n_components: this.n_componentsValue, col_retain: this.operate_columnsValue2 }
      this.addFeatureForm.featureEng_processes.push(suanfa1)
      this.addFeatureForm.featureEng_processes.push(suanfa2)
      this.addFeatureForm.original_dataset_id = this.OriginDatasetId
      this.$refs.addFeatureFormRef.validate(valid => {
        if (valid) {
          console.log(this.addFeatureForm)
          humanApi.add(this.addFeatureForm).then(response => {
            const resp = response.data
            console.log(response)
            if (resp.meta.code === 204) {
              this.$message.success('添加特征工程成功')
            } else {
              this.$message.error('添加特征工程失败')
            }
          })
        }
      })
    },
    // 获取数据集列名
    getColumns () {
      featureApi.getDatasetColumns(this.OriginDatasetId).then(response => {
        // console.log(response)
        const resp = response.data
        if (resp.meta.code === 200) {
          this.$message.success('获取数据集成功')
        }
        this.columnsList = resp.data
        // console.log(this.columnsList)
      })
      // learnApi.getMethods(this.algorithm_category).then(response => {
      //   const resp = response.data.data
      //   // this.algorithm_nameOptions.push(resp.algorithm_name)
      //   console.log(resp)
      // })
    },
    // 获取原始数据集id
    getOriginDatasetId () {
      this.OriginDatasetId = localStorage.getItem('datasetId')
      // console.log(this.OriginDatasetId)
      this.getColumns()
      // console.log(db)
    },
    // 点击查看特征工程按钮
    queryFeatureEng () {
      this.$router.push('/feature/queryFea')
    }
  }
}
</script>
<style scoped>
  .el-form-item{
    margin-top: 30px;
  }
</style>
